<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>店铺报表</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/laydate/laydate.js"></script>
  <!--  <script src="../js/common.js"></script>-->



    <style>
    body{
    	background-color: rgb(248, 248, 248);
    }
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .searchStart,.searchEnd{
        	margin-top: 0.1rem;
        	height: .44rem;
		    background: #fff;
		    overflow: hidden;
		    border-bottom: 1px solid #f2f2f2;
        }
        .searchLeft{
        	float: left;
		    width: 30%;
		    padding-left: .2rem;
		    line-height: .44rem;
        }
        .searchRight{ 
        	width:60%;
        	float: left;
           	height: .44rem;
		    line-height: .44rem;
		    text-align: right;
		    border: none;
		    outline: none;
	    }
	    .searchBtn{
	    	
	    	height: .44rem;
		    line-height: .44rem;
		    width: 40%;
		    text-align: center;
		    margin:0 auto;
		    margin-top: 0.1rem;
		    background:#37993e;
		    border-radius: 0.04rem;
		    color:#fff;
	    }
	    #pro_data{
	    	
	    }
	    #pro_data dt,#load_data dt{
	    	height: 0.36rem;
	    	padding: 0 0.16rem;
	    	background: none;
	    	font-size: 0.14rem;
	    	color: #666666;
	    	line-height: 0.36rem;
	    }
	    #pro_data dd{
	    	height: 0.44rem;
	    	border-bottom: 0.01rem solid #DCDCDC;
	    	padding: 0 0.16rem;
	    	background: #FFF;
	    }
	    #pro_data .list_left{
	    	height: 0.22rem;
	    	width: 1.1rem;
	    	border-right: 0.01rem solid #DCDCDC;
	    	font-size: 0.16rem;
	    	color: #333;
	    	margin-top: 0.11rem;
	    	margin-right: 0.08rem;
	    }
	    #pro_data input,#pro_data button,#pro_data p{
	    	float: left;
	    	
	    }
	    #pro_data input{
	    	border: none;
	    	line-height: 0.22rem;
	    	font-size: 0.16rem;
	    	margin-top: 0.11rem;
	    	outline: none;
	    	width: 2.0rem;
	    }
	    #pro_data button{
	    	color: #09af5b;
	    	font-size: 0.16rem;
	    	float: right;
	    }
	    #pro_data .unit{
	    	float: right;
	    	font-size: 0.16rem;
	    	color: #333;
	    	line-height: 0.44rem;
	    }
	    #load_data dd{
	    	height: 0.73rem;
	    	border-bottom: 0.01rem solid #DEDEDE;
	    	box-sizing: border-box;
	    	padding: 0.16rem;
	    	background: #FFF;	
	    }
	    #load_data dd .pro_name{
	    	font-size: 0.16rem;
	    	color: #333;
	    	
	    }
	    #load_data dd .pro_footer span{
	    	float: left;
	    	font-size: 0.14rem;
	    	color: #FF6701;
	    }
	    #load_data dd .pro_footer .load_time{
	    	float: right;
	    	color: #999999;
	    }
	    .pro_footer{
	    	margin-top: 0.1rem;
	    }
	    .sub_button{
	    	width:2.75rem;
	    	height: 0.44rem;
	    	background: #09AF5B;
	    	color: #FFF;
	    	line-height: 0.44rem;
	    	font-size: 0.14rem;
	    	margin: 0.16rem auto 0;
	    	text-align: center;
	    	border-radius: 0.08rem;
	    }
	    .load_btn{
    	    height: .44rem;
		    line-height: .44rem;
		    width: 40%;
		    text-align: center;
		    margin: 0.1rem auto;
		    background: #09AF5B;
		    border-radius: 0.04rem;
		    color: #fff;
	    }
	    .datawrap{
	    	position:relative;
	    	padding-bottom:0.44rem;
	    	overflow:hidden;
	    	height:2.19rem
	    }
	    .databtn{
	    	position:absolute;
	    	z-index:10;
	    	bottom:0;
	    	display:none;
    	    height: .44rem;
		    line-height: .44rem;
		    width: 100%;
		    text-align: center;
		    margin: 0rem auto;
		    background: #09AF5B;
		    border-radius: 0.04rem;
		    color: #fff;
	    }
    </style>
</head>

<body>
    <!--头部-->
    <!-- <div class="public-header flex">
        <span class="public-header-left-back"></span>
        <span class="public-header-center">店铺报表</span>
        <span class="public-header-right">新建</span>
    </div> -->

    <!--正文-->
    <div class="Shop-report bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">资金报表</a>
            <a href="javascript:;">经营报表</a>
            <a href="javascript:;">商家报表</a>
        </div>
        <div class="searchTime">
        	<div class="searchStart">
        		<p class="searchLeft">开始时间</p>
        		<input class="searchRight" id="startTime" placeholder="请选择开始时间">
        	</div>
        	<div class="searchEnd">
        		<p class="searchLeft">结束时间</p>
        		<input class="searchRight"id="endTime" placeholder="请选择结束时间">
        	</div>
        	<div class="searchBtn">
        		查询
        	</div>
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <ul class="ul-1">
                    <li class="title flex">
                        <span>成拍报表</span>
                       <!-- <em onclick="jacascript:window.location.href='../page/Shop-report-more.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>成拍数量：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                </ul>
                <ul class="ul-2">
                    <li class="title flex">
                        <span>销售报表</span>
                       <!-- <em onclick="jacascript:window.location.href='../page/Shop-report-more.1.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>已付款：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                    <li class="flex">
                        <span>已退款：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                </ul>
                <ul class="ul-3">
                    <li class="title flex">
                        <span>收款报表</span>
                       <!-- <em onclick="jacascript:window.location.href='../page/Shop-report-more.2.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>已收款：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                </ul>
                <ul class="ul-4">
                    <li class="title flex">
                        <span>待收款报表</span>
                       <!-- <em onclick="jacascript:window.location.href='../page/Shop-report-more.3.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>未发货：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                    <li class="flex">
                        <span>待确认：<font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                    <li class="flex">
                        <span>售后中： <font></font></span>
                        <span>笔数：<font></font></span>
                    </li>
                    <!--<li class="flex">-->
                        <!--<span>今日退货中：<font>1</font></span>-->
                        <!--<span>笔数：<font>1</font></span>-->
                    <!--</li>-->
                </ul>
            </div>
            <div class="bd-2 bd-0">
                <ul class="ul-1">
                    <li class="title flex">
                        <span>访客报表</span>
                      <!--  <em onclick="jacascript:window.location.href='../page/Shop-report-more.4.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>浏览人数：<font >1</font></span>
                        <span>访问次数：<font>1</font></span>
                    </li>
                </ul>
                <ul class="ul-2">
                    <li class="title flex">
                        <span>粉丝报表</span>
                      <!--  <em onclick="jacascript:window.location.href='../page/Shop-report-more.5.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>累积粉丝：<font>1</font></span>
                        <span>增长粉丝：<font>1</font></span>
                    </li>
                </ul>
                <ul class="ul-3">
                    <li class="title flex">
                        <span>产品报表</span>
                       <!-- <em onclick="jacascript:window.location.href='../page/Shop-report-more.1.html'">更多</em>-->
                    </li>
                    <li class="flex">
                        <span>发布件数：<font>1</font></span>
                        <span></span>
                    </li>
                </ul>
              <ul class="ul-4">
                    <li class="title flex">
                        <span>客户报表</span>
                        <!--<em>更多</em>-->
                    </li>
                    <li class="flex">
                        <span>付款人数：<font>1</font></span>
                        <span>新客占比：<font>1</font></span>
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
            	<dl id="pro_data">
            		<dt>紫陶汇</dt>
            		<dd class="clearfix">
            			<p class="list_left">商品名称</p>
            			<input type="text" name="" id="pro_name" value="" placeholder="请输入"/>
            		</dd>
            		<dd class="clearfix">
            			<p class="list_left">成功交易时间</p>
            			<input type="text" name="pro_time" id="pro_time" value="" placeholder="请点击选择"/>
            		</dd>
            		<dd class="clearfix">
            			<p class="list_left">成交金额</p>
            			<input type="text" name="" id="pro_money" value="" placeholder="请输入" onkeyup="clearNoNum(this)"/>
            			<p class="unit">元</p>
            		</dd>
            	</dl>
            	<div class="sub_button">提交</div>
            	<dl id="load_data">
            		<dt>导入数据</dt>
            		<div class="load_btn">
            			导入
            		</div>
            		<div class="datawrap">
	            		<div class="xian_jy">
		            		<dd class="clone_dd" style="display:none">
		            			<p class="pro_name">西施大壶</p>
		            			<div class="clearfix pro_footer">
		            				<span class="pro_price">￥1000</span>
		            				<span class="load_time">2018-05-12</span>
		            			</div>
		            		</dd>            			
	            		</div>
	            		<div class="daoru_data">
		            		<dd class="clone_dd" style="display:none">
		            			<p class="pro_name">西施大壶</p>
		            			<div class="clearfix pro_footer">
		            				<span class="pro_price">￥1000</span>
		            				<span class="load_time">2018-05-12</span>
		            			</div>
		            		</dd>            			
	            		</div> 
	            		<div class="databtn">收起</div>
            		</div>
            	</dl>
            	
            </div>
        </div>
    </div>
    <script>
		if(getQueryString('tabnum')&&getQueryString('tabnum')==3){
			$(".hd a").removeClass('active');
			$(".hd a").eq(2).addClass('active')//css({"color":'#5f3104',"border-bottom":'1px solid #5f3104',"line-height":'0.36rem'})
			$(".searchTime").hide();
			$(".bd-0").removeClass('active');
			$(".bd-3").addClass('active');
		};
    	var dataMessage={
    		storeid:sessionStorage.getItem("s_id"),
    		start_time:'',
    		end_time:''
    	};
        $('.hd a').click(function () {
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            if(index==2){
            	$('.searchTime').hide();
            }else{
            	$('.searchTime').show();
            	
            }
        });
        function clearNoNum(obj){  
		  obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符   
		  obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的   
		  obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");  
		  obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数   
		  if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
		   obj.value= parseFloat(obj.value);  
		  }  
		}
        function loadAjax(){
        	$.ajax({
                url: base_url + 'ZITAOHUI/report/funds',
                data: dataMessage,
                success: function (data) {
                    console.log(data);
                    let datas = data.extend.data;
                    let tpd = datas.tpd;//已付款
                    $('.bd-1 .ul-2 li:eq(1) span:eq(0) font').html(tpd.num);
                    $('.bd-1 .ul-2 li:eq(1) span:eq(1) font').html(tpd.num);
                    let tas = datas.tas;//成拍
                    $('.bd-1 .ul-1 li:eq(1) span:eq(0) font').html(tas.num);
                    $('.bd-1 .ul-1 li:eq(1) span:eq(1) font').html(tas.num);
                    let refunds = datas.refunds;//已退款
                    $('.bd-1 .ul-2 li:eq(2) span:eq(0) font').html(refunds.num);
                    $('.bd-1 .ul-2 li:eq(2) span:eq(1) font').html(refunds.num);
                    let receipt = datas.receipt;//已收款
                    $('.bd-1 .ul-3 li:eq(1) span:eq(0) font').html(receipt.num);
                    $('.bd-1 .ul-3 li:eq(1) span:eq(1) font').html(receipt.num);
                    let notShip = datas.notShip;//未发货
                    $('.bd-1 .ul-4 li:eq(1) span:eq(0) font').html(notShip.num);
                    $('.bd-1 .ul-4 li:eq(1) span:eq(1) font').html(notShip.num);
                    let notReceipt = datas.notReceipt;//待确认
                    $('.bd-1 .ul-4 li:eq(2) span:eq(0) font').html(notReceipt.num);
                    $('.bd-1 .ul-4 li:eq(2) span:eq(1) font').html(notReceipt.num);
//                  let returnGoods = datas.returnGoods;//退货中
//                  $('.bd-1 .ul-4 li:eq(3) span:eq(0) font').html(returnGoods.num);
//                  $('.bd-1 .ul-4 li:eq(3) span:eq(1) font').html(returnGoods.num);
                    let returnMoney = datas.returnMoney;//售后中
                    $('.bd-1 .ul-4 li:eq(3) span:eq(0) font').html(returnMoney.num);
                    $('.bd-1 .ul-4 li:eq(3) span:eq(1) font').html(returnMoney.num);
                }
            })

            $.ajax({
                url: base_url + 'ZITAOHUI/report/manage',
                data: dataMessage,
                success: function (data) {
                    console.log(data)
                    let datas = data.extend.data;
                    $('.bd-2 .ul-1 li:eq(1) span:eq(0) font').html(datas.views_dis.num)	//访问人数
                    $('.bd-2 .ul-1 li:eq(1) span:eq(1) font').html(datas.views.num)	//访问次数
                    $('.bd-2 .ul-2 li:eq(1) span:eq(0) font').html(datas.fans.num)	//累计粉丝数
                    if(datas.increase ==null ||datas.increase ==''){
                    	$('.bd-2 .ul-2 li:eq(1) span:eq(1) font').html('0')	//今日增长粉丝
                    }else{
                    	$('.bd-2 .ul-2 li:eq(1) span:eq(1) font').html(datas.increase.num)	//今日增长粉丝
                    }
                    
                    $('.bd-2 .ul-3 li:eq(1) span:eq(0) font').html(datas.publish.num)	//发布件数
                    $('.bd-2 .ul-4 li:eq(1) span:eq(0) font').html(datas.userNum.user_total)	//今日付款人数
                    $('.bd-2 .ul-4 li:eq(1) span:eq(1) font').html(datas.user_num_dis)	//新科比
                },
                error:function(data){
                    console.log(data)
                }
            })
        }
        $('.searchBtn').click(function(){
        	dataMessage.start_time =$('#startTime').val()
        	
        	
        	dataMessage.end_time =$('#endTime').val();
        	loadAjax()
        })
            
    	laydate.render({
            elem: '#startTime'
            ,type:'datetime'
        });
        laydate.render({
            elem: '#endTime'
            ,type:'datetime'
        });
        
		laydate.render({
		    elem: '#pro_time'
			,type:'datetime'
		});
		loadAjax()
		$(".sub_button").click(function(){//点击提交按钮
			var pro_name = $('#pro_name').val();
			var pro_time = $('#pro_time').val();
			var pro_money = $('#pro_money').val();
			if(pro_name!=''&&pro_time!=''&&pro_money!=''){//判空
				//console.log('输入了全部的数据！');
				$.ajax({
	                url: base_url +  'ZITAOHUI/storeOfflineTrade/insert',
	                type:'POST',
	                headers:{
	                	'Accept': 'application/json',
	                	'Content-type': 'application/json'
	                },
	                data: JSON.stringify({
	                	'store_id':sessionStorage.getItem('s_id'),
	                	'produce_title':pro_name,
	                	'produce_price':pro_money,
	                	'trade_time':pro_time
	                }),
	                success: function (data) {
	                   	alert(data.msg)
	                   	if(data.extend.status==1){
							$('#pro_name').val('');
							$('#pro_time').val('');
							$('#pro_money').val('');
	                   		jyajax()
	                   	}
	                },
	                error:function(data){
	                    console.log(data.msg)
	                }
	            })
			}else{
				alert('请输入全部的数据！');
			}
		});
		jyajax()
		function jyajax(){
			$.ajax({
                url:  base_url + 'ZITAOHUI/storeOfflineTrade/list',
                type:'POST',
                headers:{
                	'Accept': 'application/json',
                	'Content-type': 'application/json'
                },
                data: JSON.stringify({
                	'store_id':sessionStorage.getItem('s_id')
                }),
                success: function (data) {
                	$('.xian_jy .clone_dd').not($('.xian_jy .clone_dd').eq(0)).remove();
                	if(data.extend.list.length!=0){
                		if(data.extend.list.length>3){
                			$('.databtn').show().text('展开');
                		};
	                    $.each(data.extend.list,function(index,item){
	                    	var cloneList = $('.xian_jy .clone_dd').eq(0).clone(true);
	                    	cloneList.find('.pro_name').text(item.produce_title);//商品名称
	                    	cloneList.find('.pro_price').text('￥'+item.produce_price);//商品价格
	                    	cloneList.find('.load_time').text(changeTime1(item.trade_time,'date'));//商品时间
	                    	cloneList.appendTo($('.xian_jy')).show()
	                    })	                		
                	}
                },
                error:function(data){
                    console.log(data)
                }
            })
		};
		daoruajax();
		function daoruajax(){
			$.ajax({
                url:  base_url + 'ZITAOHUI/userOrder/importList',
                type:'POST',
                headers:{
                	'Accept': 'application/json',
                	'Content-type': 'application/json'
                },
	            data: JSON.stringify({
	            	'store_id':sessionStorage.getItem('s_id'),
	            	'is_import':'1',
	            }),
                success: function (data) {
                	$('.daoru_data .clone_dd').not($('.daoru_data .clone_dd').eq(0)).remove();
                	if(data.extend.list!=0){
	                    $.each(data.extend.list,function(index,item){
	                    	var cloneList = $('.daoru_data .clone_dd').eq(0).clone(true);
	                    	cloneList.find('.pro_name').text(item.produce_describe);//商品名称
	                    	cloneList.find('.pro_price').text('￥'+item.produce_price);//商品价格
	                    	cloneList.find('.load_time').text(changeTime1(item.status_change_time,'date'));//商品时间
	                    	cloneList.appendTo($('.daoru_data')).show()
	                    })	                		
                	}
                },
                error:function(data){
                    console.log(data)
                }
            })
		};
		$('.load_btn').click(function(){
			window.location.href = "./Shop_report_load.html";
		});
		var flagclick = true;
		$(".databtn").click(function(){
			console.log($(".xian_jy .clone_dd").length,$(".daoru_data .clone_dd").length)
			if(flagclick){
				$('.datawrap').css('height',($(".xian_jy .clone_dd").length+$(".daoru_data .clone_dd").length-2)*0.73+'rem')
				$(".databtn").text('收起')
				flagclick=false
			}else{
				$('.datawrap').css('height','2.19rem');
				$(".databtn").text('展开')
				flagclick=true
			}
		})
    </script>
</body>

</html>